<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer{
            background-color: brown;
            width: 500px;
            height: 400px;
        }
        #inner{
            background-color: rgb(130, 165, 42);
            width: 200px;
            height: 200px;
        }
        
        .new{
            background-color: rgb(42, 165, 132);
            width: 400px;
            height: 400px;
            box-shadow: 0px 0px 10px 5px;
        }
        .nav{
            list-style: none;
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .current{
            background-color: brown !important;
            color: aliceblue !important;
            box-shadow: 0px   0px 10px red;
        }
        .out{
            list-style: none;
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            background-color: #ccc;
            color: brown;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <h1>获取页面元素</h1>
    <ul>
        <li class="nav">1</li>
        <li class="nav">2</li>
        <li class="nav">3</li>
        <li class="nav">4</li>
        <li class="nav">5</li>
    </ul>
    <script>
        //1.获取页面元素
        //a.根据id获取页面元素   document.getElementById('id');
        var div1 = document.getElementById('outer');
        //2.更改样式
        //a.更改单个样式   标签对象.style.css样式名称=值;
        //b.更改多个样式   标签对象.style.cssText="样式1:值;样式2:值;";
        div1.style.backgroundColor = 'pink';
        div1.style.width = '300px';
        div1.style.cssText = 'background-color: yellow;width: 400px;height: 400px;';
        //c.更改类名className 标签对象.className = '类名';
        div1.className = 'new';
        //根据类名获取页面元素 document.getElementsByClassName(); 返回的是一个数组
        var lis = document.getElementsByClassName('nav');
        //事件：鼠标放上去 onmouseover  鼠标移开 onmouseout
        // for(var i=0;i<lis.length;i++){
        //     lis[i].onmouseover = function(){
        //         //更改样式
        //         this.className += ' current';
        //     }
        //     lis[i].onmouseout = function(){
        //         //更改样式
        //         this.className = 'out';
        //     }
        // }

        function $(selector){
            return document.querySelector(selector);
        }

        var div = $('#outer');//id选择器
        console.log(div.nodeType);
        console.log(div.children);
        var h1 = $('h1');//标签选择器
        console.log(h1.parentNode);
        console.log(h1.previousElementSibling);
        console.log(h1.nextElementSibling);
        var lis2 = $('.nav');//类名选择器
        console.log(lis2);
        var ul = $('ul');
        console.log(ul.children[0]);

    </script>
</body>
</html>